<template>
	<view class="y">
		<view class="x" style="padding: 16px;background-color: #ffaa00;align-items: center;">
			<view class="x  text-white" style="flex: 1;">
				<view class="cuIcon-location font36"></view>
				<navigator url="/pages/chatAi/chatAi">北海职业学院</navigator>
				<view class="cuIcon-right text-white font36"></view>
				<!-- <image style="width: 30px;height: 30px;" src="../../static/logo.png"></image> -->
			</view>
			<view class="cuIcon-scan font36 text-white"></view>
			<!-- <image style="width: 30px;height: 30px;" src="../../static/logo.png"></image> -->
		</view>
		<view style="background-color: #ffaa00;padding: 6px 16px;" @click="goChat">
			<view style="background-color: white;border-radius: 15px;height: 30px;align-items: center;" class="x">
				<!-- <image style="width: 20px;height: 20px;margin-left: 20px;" src="../../static/logo.png"></image> -->
				<view class="cuIcon-search text-999 font36 margin-left"></view>
				<view class="margin-left-xs text-999">搜索的文字</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<!-- 整个屏幕的宽度，在uniapp里，都是750rpx   -->
		<swiper indicator-dots="true" indicator-active-color="#ffaa00">
			<swiper-item>
				<image style="height: 200px;width: 750rpx ;"
					src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/12879a6451f94ec4ab3ded24e20f17f0.png">
				</image>
			</swiper-item>
			<swiper-item>
				<image style="height: 200px;width: 750rpx ;"
					src="http://yanxuan.nosdn.127.net/8e50c65fda145e6dd1bf4fb7ee0fcecc.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image style="height: 200px;width: 750rpx ;"
					src="http://yanxuan.nosdn.127.net/bff2e49136fcef1fd829f5036e07f116.jpg"></image>
			</swiper-item>
		</swiper>
		<!-- 750/5=150 -->
		<view class="x" style="flex-wrap: wrap;">
			<navigator style="width: 150rpx;align-items: center;margin-top:16px;" class="y"
				:url="'/pages/video/video?title='+item.title+'&url='+item.url" v-for="item in list">
				<image style="width: 50px;height: 50px;margin-bottom: 16px;" :src="item.image"></image>
				<!-- <view style="margin-bottom: 16px;" class=""></view> -->
				<view class="font22">{{item.title}}</view>
			</navigator>
		</view>
		<!-- 屏幕宽度是100vw 高度是100vh -->
		<view class="x" style="flex-wrap: wrap;">
			<view style="width: 20vw;align-items: center;justify-content: center;" class="y" v-for="item in menu">
				<image style="width: 50px;height: 50px;margin-bottom: 16px;" :src="item.imgUrl"></image>
				<!-- <view style="margin-bottom: 16px;" class=""></view> -->
				<view class="font22">{{item.title}}</view>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				menu: [],
				list: [{
						url: "https://api.8uid.cn/ng.php?type=video",
						title: '如沐清风',
						image: '/static/头像 女孩.svg'
					},
					{
						url: "https://api.8uid.cn/qc.php?type=video",
						title: '繁花似锦',
						image: '/static/头像 女孩 (1).svg'
					},
					{
						url: "https://api.8uid.cn/cd.php?type=video",
						title: '花好月圆',
						image: '/static/头像 女孩 (2).svg'
					},
					{
						url: "https://api.8uid.cn/tm.php?type=video",
						title: '一叶知秋',
						image: '/static/头像 女孩 (3).svg'
					},
					{
						url: "https://api.8uid.cn/sl.php?type=video",
						title: '秋月春风',
						image: '/static/头像 女孩 (4).svg'
					},
					{
						url: "https://api.8uid.cn/dd.php?type=video",
						title: '金风玉露',
						image: '/static/头像 女孩 (5).svg'
					},
					{
						url: "https://www.mnapi.cn/sg.php?type=video",
						title: '浩然之气',
						image: '/static/头像 男孩.svg'
					},
					{
						url: "https://api.8uid.cn/ng.php?type=video",
						title: '气宇轩昂',
						image: '/static/头像 男孩 (1).svg'
					},
					{
						url: "https://api.8uid.cn/ecy.php?type=video",
						title: '锦绣河山',
						image: '/static/头像 男孩 (2).svg'
					},
					{
						url: "https://api.8uid.cn/ng.php?type=video",
						title: '壮志凌云',
						image: '/static/头像 男孩 (3).svg'
					},
				]
			}
		},
		//刷新页面会调用的方法
		onLoad() {

			uni.request({
				url: 'https://h5.kxmall.vip/prod-api/storage/position/getIndexDataByStorage?storageId=11', //仅为示例，并非真实接口地址。

				success: (res) => { //请求后台服务后，拿到的数据返回，就是res这个参数
					// console.log()
					this.menu = res.data.data.carouseList.t4
				}
			});
		},
		methods: {
			goChat(){
				uni.navigateTo({
					url:"/pages/chatAi/chatAi"
				})
			}
		}
	}
</script>

<style>
	
</style>